<template>
  <div class="mobile-container">
    <div class="app-content">
      <!-- 头部 -->
      <div class="header">
        <div class="header-top">
          <div class="scan-icon" @click="handleScan">
            <Icon icon="mdi:line-scan"/>
          </div>
          <div class="notice-icon" @click="handleNotification">
            <Icon icon="mdi:notifications-none"/>
          </div>
        </div>

        <!-- 轮播图 -->
        <div class="carousel-section">
          <div class="carousel-container">
            <div
              class="carousel-slide"
              :style="{ transform: `translateX(-${currentSlide * 100}%)` }"
            >
              <div
                v-for="(slide, index) in carouselSlides"
                :key="index"
                class="slide-item"
                :style="{ backgroundImage: `url(${slide.image})` }"
                @click="handleCarouselClick(slide)"
              >
                <div class="slide-content">
                  <h3 class="slide-title">{{ slide.title }}</h3>
                </div>
              </div>
            </div>

            <!-- 内置指示器 - 固定在容器底部 -->
            <div class="carousel-indicators">
              <div
                v-for="(item, idx) in carouselSlides"
                :key="idx"
                class="indicator"
                :class="{ active: currentSlide === idx }"
                @click.stop="switchSlide(idx)"
              ></div>
            </div>
          </div>
        </div>

        <!-- 公告栏 -->
        <div class="announcement-bar">
          <div class="announcement-icon">
            <Icon icon="mdi:bullhorn-outline"/>
          </div>
          <div class="announcement-content">
            <div class="announcement-list" :style="{ transform: `translateY(${announcementOffset}px)` }">
              <div
                v-for="(item, index) in announcements"
                :key="index"
                class="announcement-item"
              >
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>

        <!-- 我的数量 & 转置换宝 -->
        <div class="balance-section">
          <div class="balance-card">
            <div class="balance-item" @click="handleMyWPAdCount">
              <span class="balance-label">我的数量</span>
              <span class="balance-value">0</span>
            </div>
            <button class="convert-btn" @click="handleConvert">转置换宝</button>
          </div>
        </div>

        <!-- 功能列表 -->
        <div class="function-list">
          <div class="function-item" @click="handleWPAd">
            <div class="function-left">
              <span class="function-text">WP广告</span>
            </div>
            <i class="el-icon-arrow-right function-arrow"></i>
          </div>

          <div class="function-item" @click="handleWPConvert">
            <div class="function-left">
              <span class="function-text">WP转置换宝</span>
            </div>
            <i class="el-icon-arrow-right function-arrow"></i>
          </div>

          <div class="function-item" @click="handleContribution">
            <div class="function-left">
              <span class="function-text">贡献值</span>
            </div>
            <i class="el-icon-arrow-right function-arrow"></i>
          </div>
        </div>
      <NavLayout/>
      </div>
  </div>
</template>

<script>
import NavLayout from '@/layout/components/Navbar/index.vue'
import { Icon } from '@iconify/vue2'

export default {
  name: 'ReplacementTreasure',
  components: {
    Icon,
    NavLayout
  },
  data() {
    return {
      activeNav: 'home',
      // 轮播图数据
      carouselSlides: [
        {
          image: require('../../../assets/images/img.png'),
          title: '活动促销',
          link: '/promotion'
        },
        {
          image: require('../../../assets/images/img_1.png'),
          title: '会员专享',
          link: '/vip'
        },
        {
          image: require('../../../assets/images/img_2.png'),
          title: '积分兑换',
          link: '/points'
        }
      ],
      currentSlide: 0,
      carouselTimer: null,
      // 公告数据
      announcements: [
        '系统维护通知：本周六凌晨2点-4点进行系统维护',
        '新功能上线：WPP转置换宝功能已开放',
        '重要公告：请及时更新您的个人信息',
        '活动预告：下周将推出新的奖励活动'
      ],
      currentAnnouncementIndex: 0,
      announcementOffset: 0,
      announcementTimer: null
    }
  },
  mounted() {
    this.startCarousel()
    this.startAnnouncementScroll()
  },
  beforeDestroy() {
    if (this.carouselTimer) {
      clearInterval(this.carouselTimer)
    }
    if (this.announcementTimer) {
      clearInterval(this.announcementTimer)
    }
  },
  methods: {
    // 轮播图方法
    startCarousel() {
      this.carouselTimer = setInterval(() => {
        this.currentSlide = (this.currentSlide + 1) % this.carouselSlides.length
      }, 4000) // 每4秒切换一次
    },

    switchSlide(index) {
      if (this.carouselTimer) {
        clearInterval(this.carouselTimer)
      }
      // 切换幻灯片
      this.currentSlide = index
      // 重新启动计时器
      this.startCarousel()
    },

    handleCarouselClick(slide) {
      // TODO: 处理轮播图点击事件
      alert(`跳转到: ${slide.title}`)
    },

    // 公告方法
    startAnnouncementScroll() {
      this.announcementTimer = setInterval(() => {
        this.currentAnnouncementIndex++
        if (this.currentAnnouncementIndex >= this.announcements.length) {
          this.currentAnnouncementIndex = 0
          this.announcementOffset = 0
        } else {
          this.announcementOffset = -this.currentAnnouncementIndex * 24
        }
      }, 4000)
    },

    handleScan() {
      // TODO: 实现扫一扫功能
      alert('打开扫一扫')
    },

    handleNotification() {
      this.$router.push('/userdistribution/notification')
    },

    handleMyWPAdCount() {
      this.$router.push('/userdistribution/mywpad')
    },

    handleConvert() {
      this.$router.push('/userdistribution/convert')
    },

    handleWPAd() {
      this.$router.push('/userdistribution/wpad')
    },

    handleWPConvert() {
      this.$router.push('/userdistribution/wpconvert')
    },

    handleContribution() {
      this.$router.push('/userdistribution/contribution')
    },

    switchNav(nav) {
      this.activeNav = nav
      // TODO: 根据导航切换页面内容
      switch(nav) {
        case 'home':
          this.$router.push('/userdistribution/home')
          break
        case 'entrust':
          this.$router.push('/userdistribution/entrust')
          break
        case 'mine':
          // 我的逻辑
          break
      }
    }
  }
}
</script>

<style scoped>
.mobile-container {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}

.app-content {
  width: 375px;
  min-height: 667px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 20px 20px 10px;
  text-align: left;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.scan-icon, .notice-icon {
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
}

/* 轮播图样式 */
.carousel-section {
  margin-bottom: 15px;
  position: relative;
}

.carousel-container {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-slide {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
}

.slide-item {
  flex: 0 0 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
}

.slide-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
}

.slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.slide-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

/* 内置指示器 */
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: white;
  width: 20px;
  border-radius: 3px;
}

.indicator:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* 公告栏样式 */
.announcement-bar {
  display: flex;
  align-items: center;
  background: #fff9e6;
  border: 1px solid #ffe58f;
  border-radius: 8px;
  padding: 12px;
  height: 24px;
  overflow: hidden;
  position: relative;
}

.announcement-icon {
  margin-right: 8px;
  font-size: 14px;
}

.announcement-content {
  flex: 1;
  height: 24px;
  overflow: hidden;
  position: relative;
}

.announcement-list {
  transition: transform 0.5s ease-in-out;
  position: absolute;
  width: 100%;
}

.announcement-item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  color: #d46b08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.balance-section {
  padding: 0 30px 10px;
}

.balance-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
  padding: 25px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.balance-item {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s ease;
}

.balance-item:hover {
  opacity: 0.9;
}

.balance-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.balance-value {
  font-size: 28px;
  font-weight: 700;
}

.convert-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.convert-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.function-list {
  flex: 1;
  padding: 0 20px;
}

.function-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 10px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.function-item:hover {
  background: #f8f9fa;
}

.function-left {
  display: flex;
  align-items: center;
}

.function-text {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.function-arrow {
  color: #999;
  font-size: 14px;
}

@media (max-width: 375px) {
  .mobile-container {
    padding: 0;
  }

  .app-content {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
  }
}
</style>
